<template>
  <div id="backHomeView">
    <!--  顶部卡片 -->
    <el-row :gutter="12" class="top-card" style="">
      <el-col :span="5">
        <el-card class="top-card-main" shadow="hover">
          <el-row :gutter="12">
            <el-col :span="6">
              <span
                class="icon-dingdan el-icon"
                style="color: #409eff; font-size: 50px"
              ></span>
            </el-col>
            <el-col :span="18">
              <el-statistic :value="outputValue">
                <template #title>
                  <el-text size="small" style="color: #9e98ac"
                    >今日订单总数
                  </el-text>
                </template>
              </el-statistic>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card class="top-card-main" shadow="hover">
          <el-row :gutter="12">
            <el-col :span="7">
              <span
                class="icon-icon-xiaoshoue el-icon"
                style="color: #409eff; font-size: 50px"
              ></span>
            </el-col>
            <el-col :span="17">
              <el-statistic :value="outputValue">
                <template #title>
                  <el-text size="small" style="color: #9e98ac"
                    >今日销售总额
                  </el-text>
                </template>
              </el-statistic>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card class="top-card-main" shadow="hover">
          <el-row :gutter="12">
            <el-col :span="7">
              <span
                class="icon-xiaoshoue1 el-icon"
                style="color: #409eff; font-size: 50px"
              ></span>
            </el-col>
            <el-col :span="17">
              <el-statistic :value="outputValue">
                <template #title>
                  <el-text size="small" style="color: #9e98ac"
                    >昨日销售总额
                  </el-text>
                </template>
              </el-statistic>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card class="top-card-main" shadow="hover">
          <el-row :gutter="12">
            <el-col :span="7">
              <span
                class="icon-xiaoshoue el-icon"
                style="color: #409eff; font-size: 50px"
              ></span>
            </el-col>
            <el-col :span="17">
              <el-statistic :value="outputValue">
                <template #title>
                  <el-text size="small" style="color: #9e98ac"
                    >进7天销售总额
                  </el-text>
                </template>
              </el-statistic>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="top-card-main" shadow="hover">
          <el-row :gutter="12">
            <el-col :span="8">
              <span
                class="icon-dingdan el-icon"
                style="color: #409eff; font-size: 50px"
              ></span>
            </el-col>
            <el-col :span="16">
              <el-statistic :value="outputValue">
                <template #title>
                  <el-text size="small" style="color: #9e98ac"
                    >全部订单数
                  </el-text>
                </template>
              </el-statistic>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- 待处理业务 -->
    <el-card class="card-main" shadow="hover">
      <div class="card-title">待办理业务</div>
      <div class="card-content">
        <el-space style="width: 100%" />
        <el-row :gutter="24">
          <el-col v-for="i in data" :key="i.label" :span="8">
            <div
              style="
                padding: 3px 0;
                border-bottom: solid 1px #f1f1f1;
                margin-bottom: 5px;
              "
            >
              <div style="display: flex">
                <div style="flex: 1">{{ i.label }}</div>

                <div style="width: 20%">
                  (
                  <el-text style="color: #f25c45">{{ i.value }}</el-text>
                  )
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <!-- 商品总览 -->
    <el-card class="card-main" shadow="hover">
      <div class="card-title">商品总览</div>
      <div class="card-content">
        <el-row>
          <el-col :span="3">
            <el-space direction="vertical">
              <el-text size="large" style="color: #f56c6c; font-weight: bolder"
                >100
              </el-text>
              <el-text size="small">商品总数</el-text>
            </el-space>
          </el-col>
          <el-col :span="3">
            <el-space direction="vertical">
              <el-text size="large" style="color: #f56c6c; font-weight: bolder"
                >100
              </el-text>
              <el-text size="small">商品上架数</el-text>
            </el-space>
          </el-col>
          <el-col :span="3">
            <el-space direction="vertical">
              <el-text size="large" style="color: #f56c6c; font-weight: bolder"
                >100
              </el-text>
              <el-text size="small">SKU总数</el-text>
            </el-space>
          </el-col>
          <el-col :span="3">
            <el-space direction="vertical">
              <el-text size="large" style="color: #f56c6c; font-weight: bolder"
                >100
              </el-text>
              <el-text size="small">SKU正售数</el-text>
            </el-space>
          </el-col>
          <el-col :span="3">
            <el-space direction="vertical">
              <el-text size="large" style="color: #f56c6c; font-weight: bolder"
                >100
              </el-text>
              <el-text size="small">库存不足预警数</el-text>
            </el-space>
          </el-col>
          <el-col :span="9">
            <el-countdown
              :value="endTodayTime"
              :value-style="{
                color: 'red',
                fontSize: '24px',
              }"
              style="margin: 0 auto; width: 50%"
              title="距离今天结束还剩下："
            />
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 订单统计 -->
    <el-card class="card-main" shadow="hover">
      <div class="card-title">数据统计</div>
      <div class="card-content">
        <div style="display: flex">
          <div
            class="statistic-card"
            style="width: 20%; border-right: solid 1px #e4e7ed"
          >
            <el-statistic :value="98500" style="font-size: 312px" />
            <div class="statistic-footer">
              <div class="footer-item">
                <span>than yesterday</span>
                <span class="green">
                  24%
                  <!--<el-icon>-->
                  <!--  <CaretTop />-->
                  <!--</el-icon>-->
                </span>
              </div>
            </div>
          </div>
          <div
            ref="ordersCharts"
            class="echarts-main"
            style="flex: 1; height: 400px"
          ></div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { markRaw, nextTick, onMounted, onUnmounted, ref } from "vue";
import { useTransition } from "@vueuse/core";
import * as echarts from "echarts";
import { getToDayEndTime } from "@/util/BasicUtil";

const endTodayTime = ref(getToDayEndTime());
const source = ref(0);
const outputValue = useTransition(source, {
  duration: 1500,
});
source.value = 172000;

//  待处理业务
const data = [
  {
    label: "待付款订单",
    value: 10,
  },
  {
    label: "已完成订单",
    value: 10,
  },
  {
    label: "待发货订单",
    value: 10,
  },
  {
    label: "退款申请",
    value: 10,
  },
  {
    label: "待回复订单",
    value: 10,
  },
  {
    label: "已发货订单",
    value: 10,
  },
];
const echartsMain = ref();
const chart = ref();
onMounted(() => {
  if (echartsMain.value) {
    // 基于准备好的dom，初始化echarts实例
    chart.value = markRaw(echarts.init(echartsMain.value));
    window.addEventListener("resize", function () {
      nextTick(() => {
        chart.value.resize();
      });
    });
    // 绘制图表
    chart.value.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  }
});
onUnmounted(() => {
  if (chart.value) {
    chart.value.dispose();
  }
});
</script>

<style lang="scss" scoped>
#backHomeView {
  width: 95%;
  margin: 0 auto;

  .top-card {
    margin: 5px;

    .top-card-main {
      padding: 10px;
    }
  }

  .card-main {
    margin: 20px auto;
    display: flex;
    flex-direction: column;

    .card-title {
      padding: 10px 20px;
      font-weight: bolder;
      height: 20px;
      background-color: #d9ecff;
    }

    .card-content {
      flex: 1;
      padding: 20px;
    }
  }
}

:deep(.el-card__body) {
  padding: 0;
}
</style>
